<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Form 校验型表单"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-form>
        <hips-form-item
          v-model="value1"
          name="input 输入框"
          label="input 输入框"
          mode="aggressive"
          immediate
          rules="required|email"
          comp="input"
          style="margin: 10px 0;"
        />
        <hips-form-item
          v-model="value2"
          name="textarea 文本域"
          label="textarea 文本域"
          mode="aggressive"
          rules="required"
          comp="textarea"
          style="margin: 10px 0;"
        />
        <hips-form-item
          v-model="value3"
          name="rate 评分"
          label="rate 评分"
          mode="aggressive"
          rules="required"
          comp="rate"
          style="margin: 10px 0;"
        />
        <hips-form-item
          v-model="value4"
          name="switchCell 单元格开关"
          label="switchCell 单元格开关"
          mode="aggressive"
          comp="switch-cell"
          rules="required"
          style="margin: 10px 0;"
        />
        <hips-form-item
          v-model="value5"
          name="checkbox 复选框"
          label="checkbox 复选框"
          mode="aggressive"
          rules="required"
          comp="checkbox"
          style="margin: 10px 0;"
        />
        <hips-form-item
          v-model="value6"
          name="checkbox 复选框组"
          label="checkbox 复选框组"
          :options="[
            {
              label: 'yes',
              value: 'yes',
            },
            {
              label: 'no',
              value: 'no',
            },
          ]"
          mode="aggressive"
          rules="required"
          comp="checkbox-group"
          style="margin: 10px 0;"
        />
        <hips-form-item
          v-model="value7"
          name="radio 单选框组"
          label="radio 单选框组"
          :options="[
            {
              label: 'Option1',
              value: 1,
            },
            {
              label: 'Option2',
              value: 2,
            },
            {
              label: 'Option3',
              value: 3,
              disabled: true,
            },
          ]"
          mode="aggressive"
          rules="required"
          comp="radio-group"
          style="margin: 10px 0;"
        />
        <hips-form-item
          v-model="value8"
          name="stepper 步进器"
          label="stepper 步进器"
          mode="aggressive"
          rules="required"
          comp="stepper"
          style="margin: 10px 0;"
        />
      </hips-form>
    </demo-block>

    <demo-block title="自定义FormItem组件">
      <hips-form>
        <hips-form-item
          name="自定义组件"
          rules="validThreeInput"
        >
          <form-cust-component
            v-model="custom"
            label="自定义组件"
          />
        </hips-form-item>
      </hips-form>
    </demo-block>

    <demo-block title="高级用法">
      <hips-form
        ref="hipsForm"
        :fields="fields"
        scroll-to-error
        @validate-fail="fail"
        @validate-success="success"
      />
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Form, FormItem } from '@hips/vue-ui';

import FormCustComponent from '@/components/form-cust-component';

export default {
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    FormCustComponent,
  },
  mixins: [ BasicView ],
  data () {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: false,
      value5: '',
      value6: [],
      value7: '',
      value8: '',
      custom: '1.1.1',
    }
  },
  computed: {
    fields() {
      return [
        {
          comp: 'input',
          name: '测试标题1',
          label: '测试标题1',
          rules: { email: true, required: true },
          value: '',
          immediate: true,
          required: true,
        },
        {
          comp: 'textarea',
          name: '测试标题2',
          label: '测试标题2',
          rules: 'required',
          value: '12415',
        },
        {
          comp: 'switch-cell',
          name: '测试标题3',
          label: '测试标题3',
          value: false,
        },
        {
          comp: 'rate',
          name: '测试标题4',
          label: '测试标题4',
          value: 2,
        },
        {
          comp: 'input',
          name: '测试标题5',
          label: '测试标题5',
          rules: 'required',
          value: '',
        },
        {
          comp: 'input',
          name: '测试标题6',
          label: '测试标题6',
          rules: 'required',
          value: '145',
        },
        {
          comp: 'input',
          name: '测试标题7',
          label: '测试标题7',
          rules: 'required',
          value: '',
        },
        {
          comp: 'input',
          name: '测试标题8',
          label: '测试标题8',
          rules: 'email',
          value: '',
        },
        {
          comp: 'input',
          name: '测试标题9',
          label: '测试标题9',
          rules: 'required',
          value: '',
        },
        {
          comp: 'checkbox',
          name: '测试标题10',
          label: '测试标题10',
          value: true,
        },
      ];
    },
  },
  mounted() {
    this.$hips.validate.extend('validThreeInput', {
      validate: (value) => {
        if (value.split('.').some((item) => item === '')) {
          return false;
        }
        return true;
      },
    });

    this.$hips.validate.addLocal({
      en_US: {  // eslint-disable-line
        messages: {
          validThreeInput: '{_field_} all of the input must have value',
        },
        names: {
          validThreeInput: 'custom component1',
        },
      },
      zh_CN: { // eslint-disable-line
        messages: {
          validThreeInput: '{_field_} 三个必须都有值',
        },
        names: {
          validThreeInput: '自定义组件1',
        },
      },
    });
  },
  methods: {
    fail(value) {
      console.log('fail', value);
    },
    success(value) {
      console.log('success', value);
    },
  },
};
</script>

<style></style>
